<!DOCTYPE html>
<html>
	<head>
		<title>展示3D模型</title>
		<style>
			body {
				margin: 0;
			}

			canvas {
				display: block;
			}
		</style>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>

		<script>
			// 创建场景
			const scene = new THREE.Scene();
			scene.background = new THREE.Color(0xf0f0f0);

			// 创建相机
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.z = 5;

			// 创建渲染器
			const renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			// 添加轨道控制器
			const controls = new THREE.OrbitControls(camera, renderer.domElement);
			controls.enableDamping = true;

			// 添加光源
			const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
			scene.add(ambientLight);
			const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
			directionalLight.position.set(0, 1, 0);
			scene.add(directionalLight);

			// 加载3D模型
			const loader = new THREE.GLTFLoader();
			loader.load(
				'sushanna.glb', // 替换为你的模型文件
				function(gltf) {
					scene.add(gltf.scene);
					// 调整模型大小和位置
					gltf.scene.scale.set(1, 1, 1);
					gltf.scene.position.set(0, 0, 0);
				},
				function(xhr) {
					console.log((xhr.loaded / xhr.total * 100) + '% loaded');
				},
				function(error) {
					console.error('An error happened', error);
				}
			);

			// 动画循环
			function animate() {
				requestAnimationFrame(animate);
				controls.update();
				renderer.render(scene, camera);
			}
			animate();

			// 响应窗口大小变化
			window.addEventListener('resize', onWindowResize, false);

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
			}
		</script>
	</body>
</html>